<template>
    <div class="myinsure">
        <div class="mydetail">
            <div class="iconBtn">
                <span v-on:click="backHistory" class="iconfont icon-fanhui">返回</span>
            </div>
            <h2>我的保单信息</h2>
            <el-form
                    ref="form"
                    :model="form"
                    label-width="120px"
                    :label-position="labelPosition">
                <el-form-item label="持卡人">
                    <el-input v-model="form.user_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.user_phone"></el-input>
                </el-form-item>
                <el-form-item label="车主姓名">
                    <el-input v-model="form.user_name"></el-input>
                </el-form-item>
                <el-form-item label="车牌号码">
                    <el-input v-model="form.car_license_num"></el-input>
                </el-form-item>
                <el-form-item label="车主身份证">
                    <el-input v-model="form.user_idnum"></el-input>
                </el-form-item>
                <el-form-item label="车牌识别代码">
                    <el-input v-model="form.car_Identification_code"></el-input>
                </el-form-item>
                <el-form-item label="车牌发动机号">
                    <el-input v-model="form.car_engine_no"></el-input>
                </el-form-item>
                <el-form-item label="保险公司">
                    <el-input v-model="form.insurance_com_name"></el-input>
                </el-form-item>
                <el-form-item label="保险类别">
                    <el-input v-model="form.insure_name"></el-input>
                </el-form-item>
                <el-form-item label="交强险到期日期">
                    <el-input v-model="form.high_ltime"></el-input>
                </el-form-item>
                <el-form-item label="商业险到期日期">
                    <el-input v-model="form.business_ltime"></el-input>
                </el-form-item>
                <el-form-item label="我的驾驶证">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="'http://172.16.10.111:8080'+form.vehicle_license_address"></el-image>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        name: "userInsurance",
        data() {
            return {
                labelPosition:'left',
                dialogImageUrl: '',
                dialogVisible: false,
                styles:'',
                loginData:{},
                form: {},

            };
        },
        watch:{
          form:function () {
              console.log(this.form)
              this.form.vehicle_license_address=this.form.vehicle_license_address.substring(1)
          }
        },
        created() {
            this.searchInsurance()
        },
        methods:{
            // 返回上一页的方法
            backHistory(){
                this.$router.go(-1)
            },
            // 根据用户id查询保单
            searchInsurance(){
                this.loginData=this.$store.state.msgCount.user
                console.log(this.loginData)
                this.axios({
                    method:'get',
                    url:api.Get_UDERINSURANCE,
                    params:{user_id:this.loginData.user_id}
                }).then(data=>{
                    this.form=data.data.data[0]
                    console.log(data)
                })
            }
        }
    }
</script>

<style>
    @import '../../assets/font/yl/iconfont.css';
</style>
<style scoped lang="less">
    .myinsure{
        width: 60rem;
        margin: auto;
        text-align: center;
        /*border: 1px solid red;*/
    }
    .mydetail{
        width: 100%;
        position: relative;
        /*border: 1px solid orange;*/
        background-color: #FCFCFC;
        margin-top: 5rem;
        /*text-align: center;*/
    }
    h2{
        padding-top: 0;
        font-size: 20px;
        color: white;
        background-color: #53617B;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
    }
    form {
        width: 40rem;
        margin: 2rem auto;
    }
    .el-input{
        width: 26rem;
    }
     .iconBtn{
        position:absolute;
        left: 10rem;
        top: 0.8rem;
        color: white;
    }
</style>